<template>
  <div class='category'>
    <!-- 左侧侧边分类导航 -->
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
        :to="`/category/sub?id=${category.id}`"
      />
    </van-sidebar>
    <!-- 右侧显示子分类 -->
    <div class="sub-category">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getAllCategories } from '../../api/category'
export default {
  name: 'Category',
  data() {
    return {
      activeKey: 0,
      categories: [], // 所有主分类
    }
  },
  created() {
    // 获取所有主分类数据
    getAllCategories()
      .then(data => {
        // console.log('所有分类：', data)
        this.categories = data.list.slice(1)
        // 默认向第一个主分类下的子分类跳转
        this.$router.push('/category/sub?id=' + this.categories[0]?.id)
      })
      .catch(console.log)
  },
}
</script>

<style lang='less' scoped>
  .van-sidebar-item--select {
    color: #f00;
    font-weight: 400;
  }
  .category {
    display: flex;
    .sub-category {
      flex: 1;
    }
  }
</style>
